<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.9.1/dist/quasar.prod.css" rel="stylesheet" type="text/css">

<#include "${ftl.common}/header.ftl">
<title>请求历史</title>
</head>
<body>
<!-- - - - - - - - - - - - - - - - - -->
<div id="app">
  <luj-table :data="data.history"></luj-table>
</div>

<!-- - - - - - - - - - - - - - - - - -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.9.1/dist/quasar.umd.prod.js"></script>

<#---表格组件LujTable{{{{{{{{{{{{{--->
<template id="lujtable">
  <div class="q-pa-md">
    <q-table
      :rows="rows"
      :columns="columns"
      row-key="name"
      hide-bottom
      separator="cell"
      :pagination="{rowsPerPage:0}"
    >
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            <#--  class="text-weight-bold"  -->
            <strong>{{ col.label }}</strong>
          </q-th>
        </q-tr>
      </template>
    </<q-table>
  </div>
</template>
<script>
  function _toQTableData(lujdat) {
    console.log(lujdat)

    const colList = [...lujdat.header.entries()]
      .map(e => { return {name: e[1], label: e[1], field: r => r[e[0]]} })

    const rowList = lujdat.body.map(r => r.data)

    //console.log(colList)
    console.log(rowList)

    return {
      columns: colList,
      rows: rowList,
    }
  }

  const LujTable = {
    name: 'luj-table',
    template: '#lujtable',
    props: ['data'],
    setup(props) {
      return _toQTableData(props.data)
    },
    computed: {
    },
  }
</script>
<#---}}}}}}}}}}}}}}}}}表格组件LujTable--->

<script>
  const data = ${data}

  const app = Vue.createApp({
    setup () {
      return {
        data: data,
      }
    },
    components: {
      LujTable,
    },
  })
  app.use(Quasar)
  app.mount('#app')
</script>
</body>
</html>
